vue3
<!-- author: xuett -->
<!-- date: 2025-03-19 09:24:40 -->
<!-- description: 教育部文档 -->
<template>
  <el-dialog v-model="dialogVisible" title="教育部专业简介" width="60%" @close="close">
    <div class="pdf-box">
      <!-- 使用 object 标签嵌入 PDF -->
      <object :data="pdfUrl" type="application/pdf" width="100%" height="600px">
        <!-- 若浏览器不支持 PDF 预览，显示提示信息 -->
        <p>您的浏览器不支持直接预览 PDF 文件，请下载查看：<a :href="pdfUrl">下载 PDF</a></p>
      </object>
    </div>
  </el-dialog>
</template>

<script setup>
const state = reactive({
  dialogVisible: false,
  pdfUrl: "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
});
const { dialogVisible, pdfUrl } = toRefs(state);

//打开弹窗
const show = () => {
  state.dialogVisible = true;
};

//关闭
const close = () => {
  state.dialogVisible = false;
};

defineExpose({ show });
</script>

<style scoped lang="scss"></style>
